<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    div{
      width: 400px;
      height: 400px;
      font-size: 30px;
      text-align: center;
      line-height: 400px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
  </style>
</head>
<body>
  <div></div>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    ctx.fillStyle="rgba(255,0,0,1)"
    ctx.fillRect(0,0,400,400)
    var pd=false
    canvas.onmousedown=function(){
      ctx.beginPath()
      pd=true
    }
    canvas.onmouseup=function(){
      ctx.closePath()
      pd=false
    }
    canvas.onmousemove=function(e){
      if(pd){
      var x=e.pageX
      var y=e.pageY
      ctx.globalCompositeOperation = "destination-out"
      ctx.arc(x,y,20,0,Math.PI*2)
      ctx.fill()
      }
    }
    var div=document.querySelector("div")
    var shu=Math.ceil(Math.random()*10)
    if(shu==1){
      div.innerText="嗨嗨害，中辣！！！"
    }
    else{
      div.innerText="嗨呀，你没中！！！"
    }
    console.log(shu);
  </script>
</body>
</html>